<template>
    <div class="dashboard">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1 class="display-4">Dashboard</h1>
          <p v-if="user !== null" class="lead text-muted">Welcome {{user.name}}</p>
          <div v-if="profile != null">
            <ProfileActived/>
            <!-- 删除账户的按钮 -->
            <div style="margin-bottom:60px;">
              <button class="btn btn-danger" @click="delectClick">删除账户</button>
            </div>
          </div>
          <div v-else>
            <p>没有任何相关的个人信息，请添加您的个人信息</p>
            <router-link to="/create-profile" class="btn btn-lg btn-info">添加个人信息</router-link>
          </div>
        
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ProfileActived from './common/ProfileActived'
    export default {
        name:"Dashboard",
        data(){
            return {
              profile:null,
            };
        },
        computed:{
          user(){
            return this.$store.getters.user
          }
        },
        components:{
          ProfileActived
        },
        methods:{
          getProfileData(){
            // console.log(this.$store.getters.user)
            this.$axios.get("/api/profile")
                       .then(res =>{
                         this.profile = res.data
                        //  更新store
                        this.$store.dispatch("setProfile",this.profile)
                       })
                       .catch(err =>{
                         console.log(err.response)
                          //  更新store
                        this.$store.dispatch("setProfile",null)
                       })
          },
          delectClick(){
            this.$axios.delete("/api/profile")
                       .then(res =>{
                         this.profile = null
                        //  更新store
                        this.$store.dispatch("clearCurrentState");
                        this.$router.push('/login');
                       })
                       .catch(err =>{
                         console.log(err)

                       })

          }
        },
        created() {
          // this.getProfileData();
        },
        beforeRouteEnter: (to, from, next) => {
          next(vm => vm.getProfileData())
        }
        
    }
</script>

<style scoped>

</style>